<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        

    E 代表HTML标签。
    E#id 代表id属性。
    <E id="id"></E>
    E.class 代表class属性。
    <E class="class"></E>
    E[attr=foo] 代表某一个特定属性。
    <E arrt="foo"></E>
    E{foo} 代表标签包含的内容是foo。
    <E>foo</E>
    E>N 代表N是E的子元素。
    <E>
        <N></N>
    </E>
    E+N 代表N是E的同级元素。
    <E></E>
    <N></N>
    E^N 代表N是E的上级元素，其实是叔叔元素，如果没有上级元素，那么效果和E+N一样,E^^N是爷爷元素，以此类推。
    <E></E>
    <N></N>

    div>(ul>li+span)>a
    <div>
        <ul>
            <li></li>
            <span></span>
        </ul>
        <a href=""></a>
    </div>

    ul>li.item${item number:$}*3
    <ul>
        <li class="item1">item number:1</li>
        <li class="item2">item number:2</li>
        <li class="item3">item number:3</li>
    </ul>

    ul>li.item$@-10*3
    <ul>
        <li class="item12"></li>
        <li class="item11"></li>
        <li class="item10"></li>
    </ul>
    </div>
</body>
</html>